<template>
    <view class="container">
        <!-- 头部状态栏 -->
        <view class="status-bar">
            <view class="shop-status">
                <text class="status-label">营业状态：</text>
                <switch :checked="isOpen" @change="toggleShopStatus" color="#4cd964" />
                <text class="status-text">{{ isOpen ? '营业中' : '已打烊' }}</text>
            </view>
            <uni-icons type="notification" size="24" color="#666" @click="showNotice" />
        </view>

        <!-- 数据概览 -->
        <view class="data-overview">
            <uni-grid :column="3" :show-border="false">
                <uni-grid-item>
                    <view class="data-item">
                        <text class="data-value">{{ todayOrders }}</text>
                        <text class="data-label">今日订单</text>
                    </view>
                </uni-grid-item>
                <uni-grid-item>
                    <view class="data-item">
                        <text class="data-value">¥{{ todaySales }}</text>
                        <text class="data-label">今日销售额</text>
                    </view>
                </uni-grid-item>
                <uni-grid-item>
                    <view class="data-item">
                        <text class="data-value">{{ pendingOrders }}</text>
                        <text class="data-label">待处理</text>
                    </view>
                </uni-grid-item>
            </uni-grid>
        </view>

        <!-- 快捷操作 -->
        <view class="quick-actions">
            <uni-section title="常用功能" type="line"></uni-section>
            <uni-grid :column="4" :highlight="false">
                <uni-grid-item v-for="(item, index) in quickActions" :key="index">
                    <view class="action-item" @click="handleAction(item.action)">
                        <uni-icons :type="item.icon" :size="32" :color="item.color" />
                        <text class="action-text">{{ item.label }}</text>
                    </view>
                </uni-grid-item>
            </uni-grid>
        </view>

        <!-- 订单状态 -->
        <view class="order-status">
            <uni-section title="订单状态" type="line"></uni-section>
            <uni-grid :column="3" :show-border="false">
                <uni-grid-item v-for="(status, index) in orderStatus" :key="index">
                    <view class="status-item" @click="viewOrderList(status.type)">
                        <text class="status-count">{{ status.count }}</text>
                        <text class="status-name">{{ status.name }}</text>
                    </view>
                </uni-grid-item>
            </uni-grid>
        </view>

        <!-- 数据图表 -->
        <view class="chart-container">
            <uni-section title="近七日数据" type="line"></uni-section>
            <canvas canvas-id="chartCanvas" class="chart-canvas"></canvas>
        </view>
        <tab-bar :current-index="0" />
    </view>
</template>

<script>
    import tabBar from '@/pages/components/tabBar.vue';
    import {
        isLogin
    } from '../tools/tools'
    export default {
        components: {
            tabBar
        },
        data() {
            return {
                isOpen: true,
                todayOrders: 56,
                todaySales: 2843.5,
                pendingOrders: 12,
                quickActions: [{
                        label: '新建商品',
                        icon: 'plus',
                        color: '#4cd964',
                        action: 'addProduct'
                    },
                    {
                        label: '订单管理',
                        icon: 'list',
                        color: '#007aff',
                        action: 'orderManage'
                    },
                    {
                        label: '库存管理',
                        icon: 'shop',
                        color: '#dd524d',
                        action: 'stockManage'
                    },
                    {
                        label: '营销活动',
                        icon: 'flag',
                        color: '#f0ad4e',
                        action: 'promotion'
                    }
                ],
                orderStatus: [{
                        name: '待接单',
                        count: 5,
                        type: 1
                    },
                    {
                        name: '进行中',
                        count: 3,
                        type: 2
                    },
                    {
                        name: '待回复',
                        count: 4,
                        type: 3
                    }
                ]
            }
        },
        onReady() {
            this.renderChart();
        },
        methods: {
            toggleShopStatus() {
                this.isOpen = !this.isOpen;
                uni.showToast({
                    title: `已${this.isOpen ? '开始' : '结束'}营业`,
                    icon: 'none'
                });
            },
            handleAction(action) {
                const routeMap = {
                    addProduct: '/pages/product/addProduct',
                    orderManage: '/pages/order/list',
                    stockManage: '/pages/stock/manage',
                    promotion: '/pages/promotion/list'
                };
                uni.navigateTo({
                    url: routeMap[action]
                });
            },
            viewOrderList(type) {
                uni.navigateTo({
                    url: `/pages/order/list?type=${type}`
                });
            },
            renderChart() {
                // 使用ucharts或其他图表库实现
                const chartData = {
                    categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    series: [{
                            name: '订单量',
                            data: [25, 38, 45, 32, 40, 55, 48]
                        },
                        {
                            name: '销售额',
                            data: [1200, 1850, 2100, 1600, 1950, 2800, 2400]
                        }
                    ]
                };
                // 图表初始化代码...
            }
        },
        onShow: async () => {
            isLogin()
        }
    }
</script>

<style scoped>
    .container {
        padding: 20rpx 20rpx 100rpx 20rpx;
        background-color: #f5f5f5;
    }

    .status-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx;
        background: #fff;
        border-radius: 12rpx;
        margin-bottom: 20rpx;
    }

    .shop-status {
        display: flex;
        align-items: center;
    }

    .status-text {
        margin-left: 15rpx;
        color: #666;
    }

    .data-overview {
        background: #fff;
        border-radius: 12rpx;
        margin-bottom: 20rpx;
    }

    .data-item {
        padding: 30rpx 0;
        text-align: center;
    }

    .data-value {
        display: block;
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
    }

    .data-label {
        display: block;
        font-size: 24rpx;
        color: #999;
        margin-top: 10rpx;
    }

    .quick-actions {
        background: #fff;
        border-radius: 12rpx;
        margin-bottom: 20rpx;
    }

    .action-item {
        padding: 30rpx 0;
        text-align: center;
    }

    .action-text {
        display: block;
        font-size: 24rpx;
        color: #666;
        margin-top: 10rpx;
    }

    .order-status {
        background: #fff;
        border-radius: 12rpx;
        margin-bottom: 20rpx;
    }

    .status-item {
        padding: 30rpx 0;
        text-align: center;
    }

    .status-count {
        display: block;
        font-size: 32rpx;
        color: #e64340;
        font-weight: bold;
    }

    .status-name {
        display: block;
        font-size: 24rpx;
        color: #666;
    }

    .chart-container {
        background: #fff;
        border-radius: 12rpx;
        padding: 20rpx;
    }

    .chart-canvas {
        width: 100%;
        height: 400rpx;
    }
</style>